<template>
  <div class="home">
    <input type="text" v-focus />
    <h1 v-bg="'green'">1111</h1>
    <h1 v-bg="'blue'">2222</h1>

    <button @click="com = 'helloworld'">改变组件</button>
    <!-- <component :is="com"></component> -->

    <child>
      <template v-slot:left>
        左侧
      </template>
      <template v-slot:center>
        中间
      </template>
      <template v-slot:right>
        右侧
      </template>
    </child>
    <!-- <child>购物车</child> -->
  </div>
</template>

<script>
import child from "../components/Child.vue";
import helloworld from "../components/HelloWorld";
export default {
  data() {
    return {
      com: "child",
    };
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
  components: {
    child,
    helloworld,
  },
};
</script>
